<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>bottle-home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="stylesheet" th:href="@{/lib/bootstrap/css/bootstrap.min.css}"/>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" th:href="@{/css/common.css}"/>
    <link rel="stylesheet" th:href="@{/css/index.css}"/>
    <script th:src="@{/js/txdjobs.js}"></script>
</head>
<body style="background-image: url('https://img.bidianer.com/skin/025.jpg')">
    <div id="app" class="container" style="padding-top: 40px">
        <div class="row bottle">
            <div class="bottle-sidebar">
                <div class="avatar" style="margin: 20px 0">
                    <img src="https://portrait.gitee.com/uploads/avatars/user/617/1852381_Liycheng_1587519654.png!avatar60" class="rounded-circle" alt="...">
                </div>
                <nav class="nav flex-column" style="margin-bottom: 10px;">
                    <a class="nav-link active" href="#">
                        <svg width="1.8rem" height="1.8rem" viewBox="0 0 16 16" class="bi bi-music-note" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path d="M9 13c0 1.105-1.12 2-2.5 2S4 14.105 4 13s1.12-2 2.5-2 2.5.895 2.5 2z"/>
                            <path fill-rule="evenodd" d="M9 3v10H8V3h1z"/>
                            <path d="M8 2.82a1 1 0 0 1 .804-.98l3-.6A1 1 0 0 1 13 2.22V4L8 5V2.82z"/>
                        </svg>
                    </a>
                    <a class="nav-link" href="#">
                        <svg width="1.8rem" height="1.8rem" viewBox="0 0 16 16" class="bi bi-gear" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M8.837 1.626c-.246-.835-1.428-.835-1.674 0l-.094.319A1.873 1.873 0 0 1 4.377 3.06l-.292-.16c-.764-.415-1.6.42-1.184 1.185l.159.292a1.873 1.873 0 0 1-1.115 2.692l-.319.094c-.835.246-.835 1.428 0 1.674l.319.094a1.873 1.873 0 0 1 1.115 2.693l-.16.291c-.415.764.42 1.6 1.185 1.184l.292-.159a1.873 1.873 0 0 1 2.692 1.116l.094.318c.246.835 1.428.835 1.674 0l.094-.319a1.873 1.873 0 0 1 2.693-1.115l.291.16c.764.415 1.6-.42 1.184-1.185l-.159-.291a1.873 1.873 0 0 1 1.116-2.693l.318-.094c.835-.246.835-1.428 0-1.674l-.319-.094a1.873 1.873 0 0 1-1.115-2.692l.16-.292c.415-.764-.42-1.6-1.185-1.184l-.291.159A1.873 1.873 0 0 1 8.93 1.945l-.094-.319zm-2.633-.283c.527-1.79 3.065-1.79 3.592 0l.094.319a.873.873 0 0 0 1.255.52l.292-.16c1.64-.892 3.434.901 2.54 2.541l-.159.292a.873.873 0 0 0 .52 1.255l.319.094c1.79.527 1.79 3.065 0 3.592l-.319.094a.873.873 0 0 0-.52 1.255l.16.292c.893 1.64-.902 3.434-2.541 2.54l-.292-.159a.873.873 0 0 0-1.255.52l-.094.319c-.527 1.79-3.065 1.79-3.592 0l-.094-.319a.873.873 0 0 0-1.255-.52l-.292.16c-1.64.893-3.433-.902-2.54-2.541l.159-.292a.873.873 0 0 0-.52-1.255l-.319-.094c-1.79-.527-1.79-3.065 0-3.592l.319-.094a.873.873 0 0 0 .52-1.255l-.16-.292c-.892-1.64.902-3.433 2.541-2.54l.292.159a.873.873 0 0 0 1.255-.52l.094-.319z"/>
                            <path fill-rule="evenodd" d="M8 5.754a2.246 2.246 0 1 0 0 4.492 2.246 2.246 0 0 0 0-4.492zM4.754 8a3.246 3.246 0 1 1 6.492 0 3.246 3.246 0 0 1-6.492 0z"/>
                        </svg>
                    </a>
                    <a class="nav-link" href="#">
                        <svg width="1.8rem" height="1.8rem" viewBox="0 0 16 16" class="bi bi-info-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                            <path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588z"/>
                            <circle cx="8" cy="4.5" r="1"/>
                        </svg>
                    </a>
                </nav>
            </div>
            <div class="bottle-main">
                <div class="header">
                    <form class="form">
                        <input class="search" type="text" placeholder="搜索群组/用户" value="">
                    </form>
                    <div class="icon-button">
                        <svg width="2rem" height="2rem" viewBox="0 0 16 16" class="bi bi-plus-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                            <path fill-rule="evenodd" d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
                        </svg>
                    </div>
                </div>
                <div class="list-group" id="list-tab" role="tablist">
                    <a :class="index==0?'list-group-item list-group-item-action active':'list-group-item list-group-item-action'"
                       v-for="(group,index) in groups" @click="currentGroup =group" data-toggle="list">
                        <div class="media">
                            <img width="50px" :src="group.avatar" class="mr-3" alt="...">
                            <div class="media-body">
                                <h6 class="name">
                                    {{group.name}}
                                    <span class="time" v-if="messages[group._id][messages[group._id].length-1]">{{messages[group._id][messages[group._id].length-1].time}}</span>
                                </h6>
                                <p class="preview" v-if="messages[group._id][messages[group._id].length-1]">{{messages[group._id][messages[group._id].length-1].name}}: {{messages[group._id][messages[group._id].length-1].content}}</p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            <div class="bottle-chat tab-content">
                <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
                    <div class="header">
                        <h5 class="name">
                            <span>{{currentGroup.name}}</span>
                        </h5>
                        <div class="operation">
                            <i class="icon">
                                <svg width="1.2em" height="1.2em" viewBox="0 0 16 16" class="bi bi-share" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" d="M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5zm-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"/>
                                </svg>
                            </i>
                            <i class="icon" id="group-manage-toggle">
                                <svg width="1.2em" height="1.2em" viewBox="0 0 16 16" class="bi bi-ui-checks-grid" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" d="M2 10a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1H2zm9-9a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-3zm0 9a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-3zm0-10a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2h-3zM2 9a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H2zm7 2a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2v-3zM0 2a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm5.354.854l-2 2a.5.5 0 0 1-.708 0l-1-1a.5.5 0 1 1 .708-.708L3 3.793l1.646-1.647a.5.5 0 1 1 .708.708z"/>
                                </svg>
                            </i>
                        </div>
                    </div>
                    <div class="message-content show-scrollbar">

                        <!--消息显示区域-->
                        <div v-for="message in messages[currentGroup._id]" :class="message.isSelf?'message self':'message'">
                            <img :src="message.avatar" class="avatar" alt="...">
                            <div class="message-body">
                                <div class="base-info">
                                    <span :class="message.user.tag == '' ?'tag hide':'tag'" v-if="message.user">{{message.user.tag}}</span>
                                    <span class="name">{{message.name}}</span>
                                    <span class="time">{{message.createTime}}</span>
                                </div>
                                <div class="content-text"><p>{{message.content}}</p></div>
                            </div>
                        </div>
                    </div>
                    <div class="user-panel" v-if="isLogin">
                        <div id="expression" class="collapse">
                            <div th:replace="block::expression"></div>
                        </div>
                        <div style="margin-left: 5px;">
                            <i data-toggle="collapse" data-target="#expression" aria-expanded="false">
                                <svg width="1.8em" height="1.8em" viewBox="0 0 16 16" class="bi bi-emoji-smile" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                                    <path fill-rule="evenodd" d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683z"/>
                                    <path d="M7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z"/>
                                </svg>
                            </i>
                            <svg width="1.8em" height="1.8em" viewBox="0 0 16 16" class="bi bi-ui-checks-grid" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M2 10a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1H2zm9-9a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-3zm0 9a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-3zm0-10a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2h-3zM2 9a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H2zm7 2a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2v-3zM0 2a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm5.354.854l-2 2a.5.5 0 0 1-.708 0l-1-1a.5.5 0 1 1 .708-.708L3 3.793l1.646-1.647a.5.5 0 1 1 .708.708z"/>
                            </svg>
                        </div>
                        <input type="text" class="form-control" id="content" placeholder="赶快写点东西吧" style="margin: 0 8px;width: 78%;">
                        <button id="sendBtn" type="button" class="btn btn-primary" @click="sendMsg($('#content').val())">发送</button>
                    </div>
                    <div class="user-panel" v-else>
                        <div>
                            游客朋友你好, 请<span class="guestLogin" @click="loginDialogVisible = true">登录</span>后参与聊天
                        </div>
                    </div>
                    <div class="group-manage-panel" style="display: none">
                        <div class="content-title">群组信息</div>
                        <div class="content-body">
                            <div class="content-subtitle">功能</div>
                            <button type="button" class="btn btn-outline-danger" style="margin-bottom: 8px">退出群组</button>
                            <div class="content-subtitle">在线成员 10</div>
                            <div class="content-users show">
                                <div class="user-block">
                                    <div class="user-info">
                                        <img src="https://portrait.gitee.com/uploads/avatars/user/617/1852381_Liycheng_1587519654.png!avatar60" class="rounded-circle" alt="...">
                                        <span class="name">lycheng</span>
                                    </div>
                                    <span class="user-agent">
                                        Chrome OS X
                                    </span>
                                </div>
                                <div class="user-block">
                                    <div class="user-info">
                                        <img src="https://portrait.gitee.com/uploads/avatars/user/617/1852381_Liycheng_1587519654.png!avatar60" class="rounded-circle" alt="...">
                                        <span class="name">lycheng</span>
                                    </div>
                                    <span class="user-agent">
                                        Chrome OS X
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog
                title="登录"
                :visible.sync="loginDialogVisible"
                width="30%">
            <span>这是一段信息</span>
        </el-dialog>
    </div>
    <script th:src="@{/js/jquery.js}"></script>
    <script th:src="@{/lib/bootstrap/bootstrap.min.js}"></script>
    <script th:src="@{/lib/vue/vue.min.js}"></script>
    <script th:src="@{/js/index.js}"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        $(".emoji-content-item span").click(function (event) {
            document.getElementById("content").value += event.target.innerText
        })
        // 群组功能面板显示与隐藏控制
        $("#group-manage-toggle").click(function () {
            $(".group-manage-panel").addClass("show")
            if ($(".panel-mask").length > 0) {
                $(".panel-mask").addClass("show")
            } else {
                let mask = document.createElement("div");
                mask.setAttribute("class","panel-mask show");
                $("body").append(mask);
                $(".panel-mask").click(function () {
                    $(".panel-mask").removeClass("show")
                    $(".group-manage-panel").removeClass("show")
                })
            }
        })

    </script>
</body>
</html>
